<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
		<script src="js/vue.js?v=2.3.4" type="text/javascript" charset="utf-8"></script>
	</head>
	<body>
		<div>本例我们测试使用 Slot 分发内容.</div>
		<div id="app1">
			<br/>
			<span>{{message}}</span>
			<br/>
			<vue-comp1>
				<p>本块内容由父组件进行管理，可以直接使用父组件的变量</p>
				<p>{{message}}</p>
			</vue-comp1>
		</div>
		
		<div id="app2">
			<br/>
			<span>{{message}}</span>
			<br/>
			<p>我们测试下不传递slot时使用默认slot内容的情况</p>
			<vue-comp2></vue-comp2>
		</div>
		
		<div id="app3">
			<br/>
			<span>{{message}}</span>
			<br/>
			<p>我们测试下多个slot槽的情况</p>
			<vue-comp3>
				<h1 slot="title">我将自身作为名为title的slot槽的内容</h1>
				<p>这些内容由于没有指定slot属性会被默认的slot接收</p>
				<p>这些内容由于没有指定slot属性会被默认的slot接收</p>
				<template slot="footer">
					<p>使用template标签来传递多个内容</p>
					<p>使用template标签来传递多个内容</p>
				</template>
			</vue-comp3>
		</div>
		
		<div id="app4">
			<br/>
			<span>{{message}}</span>
			<br/>
			<p>我们测试下子组件slot回传参数给父组件的情况</p>
			<vue-comp4>
				<template slot="lis" scope="props">
					<li>
						{{props.pidx}}
						{{props.knme}}
					</li>
				</template>
			</vue-comp4>
		</div>
	</body>
<script type="text/javascript">

var app1 = new Vue({
	el: '#app1',
	data: {
		message: "鬼知道我经历了什么",
	},
	components:{
		'vue-comp1': {
			data: function(){
				return {
					my_say: "我在子组件里说了话"
				};
			},
			template: "<div><span>{{my_say}}</span><br/><slot></slot></div>"
		}
	}
});

var app2 = new Vue({
	el: '#app2',
	data: {
		message: "鬼知道我经历了什么",
	},
	components:{
		'vue-comp2': {
			data: function(){
				return {
					my_say: "我在子组件里说了话"
				};
			},
			template: "<div><span>{{my_say}}</span><br/><slot><p>我在slot标签里有一些默认内容，只有在slot不传递时才会显示出来。</p></slot></div>"
		}
	}
});

var app3 = new Vue({
	el: '#app3',
	data: {
		message: "鬼知道我经历了什么",
	},
	components:{
		'vue-comp3': {
			data: function(){
				return {
					my_say: "我在子组件里说了话"
				};
			},
			template: "<div><span>{{my_say}}</span><br/><slot name='title'></slot><slot><p>所有的未指定slot名内容都会被我接收。</p></slot><slot name='footer'></slot></div>"
		}
	}
});

var app4 = new Vue({
	el: '#app4',
	data: {
		message: "鬼知道我经历了什么",
	},
	components:{
		'vue-comp4': {
			data: function(){
				return {
					my_say: "我在子组件里说了话",
					items: [
						{name: "高等数学"},
						{name: "大学英语"},
						{name: "心理教育"}
					],
					pidx: "教学内容-"
				};
			},
			template: "<div><span>{{my_say}}</span><br/><ul><slot name='lis' v-for='item in items' :knme='item.name' :pidx='pidx'>绑定的参数名不要和已知属性重复，会被覆盖</slot></ul></div>"
		}
	}
});
</script>
</html>
